<template>
  <!-- #ifndef H5 -->
  <u-navbar title="采购订单" fixed border leftIcon=""></u-navbar>
  <!-- #endif -->
  <!-- #ifdef H5 -->
  <u-navbar title="采购订单" fixed border @leftClick="navigateBack" @rightClick="navigateHome">
    <template #right>
      <u-icon name="home" size="24"></u-icon>
    </template>
  </u-navbar>
  <!-- #endif -->
  <view class="page_wrap_container" :style="{ paddingTop: NavBarHeight + 'px' }">
    <view class="actions_wrap" :style="{ top: NavBarHeight + 'px' }">
      <view class="ac_left" @click="handleShowLeft"><text class="ac_left_text">{{ title }}</text><u-icon
          :name="typeShow ? 'arrow-up' : 'arrow-down'"></u-icon>
      </view>
      <view class="ac_center">
        <up-search shape="round" :showAction="false" @search="handleSearch" @clear="handleSearchClear"></up-search>
      </view>
      <view class="ac_right" @click="handlepopOpen">
        <img class="ac_right_img" :src=screenImg alt="">
      </view>
    </view>
    <scroll-view :style="{ height: windowHeight - 50 + 'px' }" scroll-y enable-flex :show-scrollbar="false"
      class="purchase_page_list" v-if="pagination.listData && pagination.listData.length > 0" @scrolltolower="loadMore">
      <view class="list_item" v-for="item in pagination.listData" :key="item.id" @click="gotoDetail(item)">
        <view class="list_item_header">
          <view class="lih_title">{{ item.supplierName }}</view>
          <view class="lih_tag"><up-tag :text="item.status == 2 ? '生产中' : item.status == 3 ? '已完成' : '-'"
              :type="item.status == 2 ? 'primary' : 'success'" plain plainFill></up-tag></view>
        </view>
        <view class="list_item_info">
          <view class="lif_item">
            <view class="lifi_top">订单号：</view>
            <view class="lifi_main">{{ item.purchaseOrderCode || '-' }}</view>
          </view>
          <view class="lif_item">
            <view class="lifi_top">大类：</view>
            <view class="lifi_main">{{ item.firstClassConfigName || '-' }}</view>
          </view>
          <view class="lif_item">
            <view class="lifi_top">供应链交期：</view>
            <view class="lifi_main">{{ item.deliveryTime || '-' }}</view>
          </view>
        </view>
        <view class="list_item_img_box">
          <view class="liib_item" v-for="it in item?.purchaseOrderCommodityList" :key="it.id">
            <view class="liibi_main">
              <view class="lm_imgbox">
                <image :src="it.pictureUrl" alt="" />
              </view>
              <view class="lm_textbox">
                <view class="liibi_title_box">
                  <view class="left_main_title text_ellipsis">{{ it.productName || '-' }}</view>
                  <view class="price_num">¥{{ it.tagPrice || '-' }}</view>
                </view>
                <view class="subtitle">款式编码：{{ it.spuCode || '-' }}</view>
                <view class="subtitle">商品条码：{{ it.skuCode || '-' }}</view>
                <view class="subtitle liibi_btm">
                  <view>{{ it.colorDetailName || '-' }}；{{ it.commoditySize }}</view>
                  <view>x{{ it.orderQty || '-' }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="total_amount_box">
          <view>总共{{ item?.purchaseOrderCommodityList?.length }}个sku</view>
          <view>采购金额：<text class="amount_style">¥{{ item?.totalAmount }}</text></view>
        </view>
        <view class="actions_box" v-if="item.status != 3">
          <!-- #ifndef H5 -->
          <view class="ab_btn" v-if="item.contractStatus == 0" @click.stop="sendContract(item)">提交合同</view>
          <view class="ab_btn" @click.stop="orderQC(item)">预约QC</view>
          <!-- #endif -->
          <!-- #ifdef H5 -->
          <view class="ab_btn" v-if="item.contractStatus == 1 || item.contractStatus == 2"
            @click.stop="downloadContract(item)">下载合同</view>
          <!-- #endif -->
          <view class="ab_btn" @click.stop="reportNum(item)">汇报生产进度</view>
          <view class="ab_btn" v-if="item.scanStatus == 1" @click.stop="gotoSend(item)">预约发货</view>
        </view>
      </view>
      <view class="has_data_text">
        <view class="no_more" v-if="!pagination.finished">加载中～</view>
        <view class="no_more" v-else>没有数据了～</view>
      </view>
      <view :style="{ height: '50px'}"></view>
    </scroll-view>
    <view class="empty_wrap" :style="{ height: windowHeight + 'px' }" v-else>
      <up-empty mode="order" text="暂无数据～">
      </up-empty>
    </view>
    <up-picker :show="typeShow" :columns="options" keyName="label" @close="pickerClose" @cancel="pickerClose"
      @confirm="pickerConfirm" closeOnClickOverlay></up-picker>
    <up-popup :show="popupShow" :round="10" @close="popClose" closeOnClickOverlay>
      <view class="status_wrap_pop">
        <view class="pop_actions">
          <view class="reset_btn" @click="popReset">重置</view>
          <view class="confirm_btn" @click="popSearch">查询</view>
        </view>
        <view class="status_item" v-for="(item, index) in statusOptions" :key="item.title">
          <view class="status_item_title">{{ item.title }}</view>
          <view class="status_item_btns_box">
            <view
              :class="'status_item_btn ' + (Array.isArray(item.value) ? (item.value.includes(it.value) ? 'status_item_btn_active' : '') : item.value == it.value ? 'status_item_btn_active' : '')"
              v-for="it in item.options" :key="it.value" @click="handleChangeStatus(index, it.value)">
              {{ it.label }}
            </view>
          </view>
        </view>
      </view>
    </up-popup>
    <up-modal :show="modalShow" showCancelButton closeOnClickOverlay :title="modalTitle" @cancel="modalCancel"
      @close="modalCancel" @confirm="modalConfirm"></up-modal>
    <up-popup :show="popupFormShow" :round="10" @close="popFormClose" closeOnClickOverlay>
      <view class="status_wrap_pop">
        <view class="pop_actions">
          <view class="reset_btn" @click="popFormClose">关闭</view>
          <view class="confirm_btn" @click="popFormSave">保存</view>
        </view>
        <view class="form_wrap">
          <up-form labelAlign="right" ref="formReportRef" :model="modalReport" labelWidth="100" :rules="formRules">
            <up-form-item label="汇报日期：" prop="report.reportDate" borderBottom>
              <up-cell :titleStyle="{ color: '#c1c4cc', fontSize: '15px' }" @click="handleShowDatePicker"
                :title="modalReport.report.reportDate" :isLink="true" arrow-direction="down" :border="false"></up-cell>
            </up-form-item>
            <up-form-item label="累计成品数：" prop="report.totalProductQty" borderBottom>
              <up-input v-model="modalReport.report.totalProductQty" placeholder="请输入累计成品数"></up-input>
            </up-form-item>
            <up-form-item label="备注：" prop="report.remark" borderBottom>
              <up-textarea v-model="modalReport.report.remark" placeholder="请输入备注" height="40"
                maxlength="100"></up-textarea>
            </up-form-item>
          </up-form>
        </view>
      </view>
    </up-popup>
    <up-popup :show="popupFormQCShow" :round="10" @close="QCFormClose" closeOnClickOverlay>
      <view class="status_wrap_pop">
        <view class="pop_actions">
          <view class="reset_btn" @click="QCFormClose">关闭</view>
          <view class="confirm_btn" @click="popFormQCSave">保存</view>
        </view>
        <view class="form_wrap">
          <up-form labelAlign="right" ref="QCFormRef" :model="modalQC" labelWidth="130" :rules="formQCRules">
            <up-form-item label="QC阶段：" prop="QC.qualityPhase" borderBottom>
              <up-cell :titleStyle="{ color: '#c1c4cc', fontSize: '15px' }" @click="handleShowQCPicker"
                :title="modalQC.QC.qualityPhaseName ? modalQC.QC.qualityPhaseName : '请选择'" :isLink="true"
                arrow-direction="down" :border="false"></up-cell>
            </up-form-item>
            <up-form-item label="预约QC时间：" prop="QC.scheduleQualityTime" borderBottom>
              <up-cell :titleStyle="{ color: '#c1c4cc', fontSize: '15px' }" @click="handleShowDatePicker"
                :title="modalQC.QC.scheduleQualityTime" :isLink="true" arrow-direction="down" :border="false"></up-cell>
            </up-form-item>
          </up-form>
        </view>
      </view>
    </up-popup>
    <up-datetime-picker ref="datetimePickerRef" closeOnClickOverlay :show="datePickerShow" v-model="datetimeTime"
      mode="date" :formatter="formatter" @confirm="datePickerConfirm" @cancel="datePickerClose"
      @close="datePickerClose"></up-datetime-picker>
    <up-picker :show="QCSelectShow" closeOnClickOverlay :columns="QCcolumns" keyName="label" @confirm="onQCconfirm"
      @cancel="onQCcancel" @close="onQCcancel"></up-picker>
  </view>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import screenImg from '@/static/images/index/screen.png'
// #ifdef H5
import { saveAs } from 'file-saver'
// #endif
import HTTP from "@/utils/http"
import dayjs from "dayjs"
import { reactive } from "vue";
import type { PurchaseListType } from "./types"
import { onLoad } from "@dcloudio/uni-app";
import useScreenSize from "@/hooks/useScreenSize"
const { windowHeight, NavBarHeight, isIphoneX } = useScreenSize()
const navigateBack = () => {
  uni.navigateBack()
}
const navigateHome = () => {
  uni.switchTab({ url: "/pages/index/index" })
}
// #ifdef H5
const downloadContract = (info: any) => {
  console.log(info.contractCode, 'info');
  HTTP.POST({
    url: "sop/sop/purchase/contract/printContract",
    isJson: true,
    data: { contractCode: info.contractCode },
    success: (res: any) => {
      if (res.code == 200 && res.data) {
        downloadByOwnUrl(res.data)
      }
    },
    complete: () => {
    }
  })
}
const downloadByOwnUrl = (url: string) => {
  const match = url.match(/[^/]+$/)
  if (match) {
    const part = match[0]
    const dot = part.split('.')
    const name = dot[0]?.split('_')?.[0]
    const extension = dot[1]
    const fileurlname = name + '.' + extension
    fetch(url)
      .then((response) => response.blob())
      .then((blob) => saveAs(blob, fileurlname))
      .catch((error) => console.error(error))
  } else {
    return url
  }
}
// #endif

//获取页面id
onLoad((options: any) => {
  const selectKey = options.select || ""
  const value = options.value || ""
  if (selectKey) {
    const index = initOp.value?.findIndex((item) => item.key == selectKey)
    if (index >= 0) {
      initOp.value[index].value = value
      statusOptions.value = JSON.parse(JSON.stringify(initOp.value))
    }
  }
})
// qc picker
const QCSelectShow = ref(false)
const QCcolumns = [[
  { label: '产前会', value: "1" },
  { label: '初期', value: "2" },
  { label: '中期', value: "3" },
  { label: '尾查', value: "4" },
]]
const handleShowQCPicker = () => {
  QCSelectShow.value = true
}
const onQCconfirm = (event: any) => {
  modalQC.QC.qualityPhase = event?.value[0]?.value
  modalQC.QC.qualityPhaseName = event?.value[0]?.label
  QCSelectShow.value = false
}
const onQCcancel = () => {
  QCSelectShow.value = false
}
//DatePicker
const datetimeTime = ref(dayjs().format("YYYY-MM-DD"))
const datetimePickerRef = ref<any>(null);
const formatter = (type: string, value: string) => {
  if (type === 'year') {
    return `${value}年`;
  }
  if (type === 'month') {
    return `${value}月`;
  }
  if (type === 'day') {
    return `${value}日`;
  }
  return value;
};
const datePickerShow = ref(false)
const handleShowDatePicker = () => {
  datePickerShow.value = true
}
const datePickerConfirm = (event: any) => {
  datePickerShow.value = false
  modalReport.report.reportDate = dayjs(event.value).format("YYYY-MM-DD")
  modalQC.QC.scheduleQualityTime = dayjs(event.value).format("YYYY-MM-DD")
  datetimeTime.value = dayjs(event.value).format("YYYY-MM-DD")
}
const datePickerClose = () => {
  datePickerShow.value = false
  modalReport.report.reportDate = dayjs().format("YYYY-MM-DD")
  modalQC.QC.scheduleQualityTime = dayjs().format("YYYY-MM-DD")
  datetimeTime.value = dayjs().format("YYYY-MM-DD")
}
//popupFormShow
const formReportRef = ref<any>(null)
const popupFormShow = ref(false)
const popFormClose = () => {
  popupFormShow.value = false
  formReportRef.value.resetFields()
  modalReport.report.reportDate = dayjs().format("YYYY-MM-DD")
  modalQC.QC.scheduleQualityTime = dayjs().format("YYYY-MM-DD")
  datetimeTime.value = dayjs().format("YYYY-MM-DD")
}
const popFormSave = () => {
  formReportRef.value.validate().then((data: any) => {
    HTTP.POST({
      url: "sop/sop/purchase/produce/schedule/insert",
      isJson: true,
      data: { ...modalReport.report, purchaseOrderCode: currentInfo.value.purchaseOrderCode },
      success: (res: any) => {
        if (res.code == 200) {
          uni.showToast({
            title: '操作成功',
            icon: 'none',
          })
          handleSearch(keyword.value)
        }
      },
      complete: () => {
        popFormClose()
      }
    })
  })
}
//popupFormQCShow
const QCFormRef = ref<any>(null)
const popupFormQCShow = ref(false)
const QCFormClose = () => {
  popupFormQCShow.value = false
  QCFormRef.value.resetFields()
  modalQC.QC = {
    qualityPhase: "",
    qualityPhaseName: "",
    scheduleQualityTime: dayjs().format("YYYY-MM-DD"),
  }
  modalReport.report.reportDate = dayjs().format("YYYY-MM-DD")
  datetimeTime.value = dayjs().format("YYYY-MM-DD")
}
const popFormQCSave = () => {
  QCFormRef.value.validate().then(() => {
    const params = {
      qualityPhase: modalQC.QC.qualityPhase,
      scheduleQualityTime: modalQC.QC.scheduleQualityTime,
      purchaseOrderCodes: [currentInfo.value.purchaseOrderCode]
    }
    HTTP.POST({
      url: "sop/sop/quality/create",
      isJson: true,
      data: params,
      success: (res: any) => {
        if (res.code == 200) {
          uni.showToast({
            title: '操作成功',
            icon: 'none',
          })
          handleSearch(keyword.value)
        }
      },
      complete: () => {
        QCFormClose()
      }
    })
  })
}
//Modal
const modalShow = ref(false)
const modalTitle = ref("确认要提交合同吗？")
const modalCancel = () => {
  modalShow.value = false
  currentInfo.value = {}
}
const modalConfirm = () => {
  HTTP.POST({
    url: "sop/sop/purchase/contract/submitContract",
    isJson: true,
    data: { contractIds: [currentInfo.value?.contractId] },
    success: (res: any) => {
      if (res.code == 200) {
        uni.showToast({
          title: '操作成功',
          icon: 'none',
        })
        handleSearch(keyword.value)
      }
    },
    complete: () => {
      modalCancel()
    }
  })
}
// 类型筛选
const type = ref<string>("purchaseOrderCode");
const typeShow = ref(false);
const title = ref<string>("采购单");
const options = [[
  { label: "采购单", value: "purchaseOrderCode" },
  { label: "合同", value: "contractCode" },
  { label: "QC单", value: "qualityOrderCode" },
  { label: "供应商", value: "supplierName" },
  { label: "款式", value: "spuCode" },
  { label: "商品条码", value: "skuCode" },
]];
const handleShowLeft = () => {
  typeShow.value = !typeShow.value
}
const pickerClose = () => {
  typeShow.value = false
}
const pickerConfirm = (event: any) => {
  const target = event.value[0]
  type.value = target.value;
  title.value = target.label;
  typeShow.value = false
};

//search
const keyword = ref("")
const handleSearch = (key: string) => {
  resetPagination()
  keyword.value = key
  getListData()
}
const resetPagination = () => {
  pagination.current = 1
  pagination.size = 10
  pagination.listData = []
  pagination.allcurrent = 1
  pagination.finished = false
}
const handleSearchClear = () => {
  keyword.value = ""
  handleSearch("")
}
//状态筛选
const popupShow = ref(false)
const initOp = ref<any[]>([
  { title: "订单状态", options: [{ label: "生产中", value: 2 }, { label: "已完成", value: 3 }], value: [2, 3], key: "statusList" },
  { title: "订单合同", options: [{ label: "合同待提交", value: 0 }, { label: "合同待签署", value: 1 }], value: null, key: "contractStatus" },
  { title: "QC", options: [{ label: "待回复", value: 1 }, { label: "待执行", value: 5 }], value: null, key: "qualityStatus" },
  { title: "预约发货", options: [{ label: "待审核", value: 1 }, { label: "待发货", value: 2 }], value: null, key: "reserveInvoiceStatus" },
])
const statusOptions = ref(JSON.parse(JSON.stringify(initOp.value)))
const popReset = () => {
  statusOptions.value = JSON.parse(JSON.stringify(initOp.value))
  handleSearch(keyword.value)
  popupShow.value = false
}
const handlepopOpen = () => {
  popupShow.value = true
}
const popClose = () => {
  popupShow.value = false
}
const popSearch = () => {
  handleSearch(keyword.value)
  popupShow.value = false
}
const handleChangeStatus = (index: number, value: number) => {
  const defaultValue: number | number[] | null = statusOptions.value[index].value
  if (Array.isArray(defaultValue)) {
    const itindex = defaultValue.findIndex(it => it === value)
    if (itindex >= 0 && defaultValue.length > 1) defaultValue.splice(itindex, 1)
    else defaultValue.push(value)
  } else {
    defaultValue == value ? (statusOptions.value[index].value as number | null) = null : (statusOptions.value[index].value as number | null) = value
  }
}
//列表数据
onMounted(() => {
  datetimePickerRef.value && datetimePickerRef.value?.setFormatter(formatter);
  getListData()
})
const pagination = reactive<{ current: number, size: number, listData: PurchaseListType[], allcurrent: number, finished: boolean }>({
  current: 1, size: 10, listData: [], allcurrent: 1, finished: false
})
const getListData = async () => {
  if (pagination.current > pagination.allcurrent) return;
  const params = {
    current: pagination.current,
    size: pagination.size
  } as any
  if (keyword.value) {
    params[type.value] = keyword.value
  }
  statusOptions.value.forEach((item: any) => {
    if (item.value != null) {
      params[item.key] = item.value
    }
  })
  HTTP.POST({
    url: "sop/sop/purchase/order/appPagePurchaseOrder",
    isJson: true,
    data: params,
    success: (res: any) => {
      if (res.code == 200) {
        pagination.allcurrent = res.data?.pageNum || 1
        pagination.listData = pagination.listData.concat(res?.data?.list || [])
        if (pagination.current + 1 > pagination.allcurrent) pagination.finished = true
        else pagination.finished = false
      } else {
        pagination.listData = []
      }
    }
  })
}
const loadMore = () => {
  pagination.current = pagination.current + 1
  getListData()
}
// actions
const currentInfo = ref<Record<string, any>>({})
const sendContract = (info: PurchaseListType) => {
  modalShow.value = true
  currentInfo.value = info
}
const reportNum = (info: PurchaseListType) => {
  currentInfo.value = info
  popupFormShow.value = true
}
const orderQC = (info: PurchaseListType) => {
  currentInfo.value = info
  popupFormQCShow.value = true
}
const gotoSend = (info: PurchaseListType) => {
  uni.navigateTo({ url: "/pages/purchase/send?id=" + info.id })
}
const gotoDetail = (info: PurchaseListType) => {
  uni.navigateTo({ url: "/pages/purchase/detail?id=" + info.id + "&purchaseOrderCode=" + info.purchaseOrderCode })
}
//form
const modalReport = reactive({
  report: {
    reportDate: dayjs().format("YYYY-MM-DD"),
    totalProductQty: "",
    remark: ""
  }
})
const formRules = {
  'report.reportDate': { type: "string", required: true, message: "请选择汇报日期", },
  'report.totalProductQty': { type: "string", required: true, message: "请输入累计成品数", },
}
const modalQC = reactive({
  QC: {
    qualityPhase: "",
    qualityPhaseName: "",
    scheduleQualityTime: dayjs().format("YYYY-MM-DD"),
  }
})
const formQCRules = {
  'QC.qualityPhase': { type: "string", required: true, message: "请选择QC阶段", },
  'QC.scheduleQualityTime': { type: "string", required: true, message: "请选择预约QC时间", },
}
</script>
<style lang="scss" scoped>
.text_ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page_wrap_container {
  display: flex;
  flex-direction: column;

  .actions_wrap {
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: fixed;
    width: 100%;
    z-index: 10;

    .ac_left {
      padding: 0 20rpx;
      max-width: 230rpx;
      flex-shrink: 0;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #666;
      gap: 6rpx;

      .ac_left_text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .ac_center {
      flex: 1;
    }

    .ac_right {
      width: 100rpx;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;

      .ac_right_img {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }

  .purchase_page_list {
    padding-top: 100rpx;

    .has_data_text {
      color: #aaa;
      text-align: center;
    }

    .list_item {
      margin: 24rpx 24rpx 0;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      margin-bottom: 24rpx;
      border-radius: 18rpx;
      box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.08);
      overflow: hidden;

      .list_item_header {
        padding: 0 20rpx;
        height: 80rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f1f1f1;

        .lih_title {
          flex: 1;
          font-weight: 500;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-size: 34rpx;
        }

        .lih_tag {
          flex-shrink: 0;
        }
      }

      .list_item_info {
        display: flex;
        flex-direction: column;
        padding: 20rpx;
        padding-bottom: 0;

        .lif_item {
          flex: 1;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          margin-bottom: 12rpx;

          .lifi_top {
            margin-right: 12rpx;
            color: #888;
          }

          .lifi_main {
            color: #333;
          }
        }
      }

      .list_item_img_box {
        padding: 0 20rpx;

        .liib_item {
          display: flex;
          flex-direction: column;
          margin-bottom: 12rpx;

          .liibi_main {
            display: flex;

            .lm_imgbox {
              width: 120rpx;
              height: 120rpx;
              margin-top: 8rpx;
              border-radius: 6rpx;
              overflow: hidden;
              flex-shrink: 0;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .lm_textbox {
              flex: 1;
              padding-left: 12rpx;
              font-size: 28rpx;

              .liibi_title_box {
                font-size: 30rpx;
                color: #333;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .left_main_title {
                  max-width: 400rpx;
                  font-weight: 500;
                }

                .price_num {
                  font-weight: 500;
                }
              }

              .subtitle {
                color: #888;
              }

              .liibi_btm {
                display: flex;
                align-items: center;
                justify-content: space-between
              }

            }
          }
        }
      }

      .total_amount_box {
        display: flex;
        justify-content: space-between;
        letter-spacing: .03em;
        align-items: center;
        padding: 20rpx;
        padding-bottom: 26rpx;
        font-size: 28rpx;
        color: #666;

        .amount_style {
          color: goldenrod;
        }
      }

      .actions_box {
        border-top: 1px solid #f1f1f1;
        padding: 20rpx 10rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6rpx;

        .ab_btn {
          font-size: 30rpx;
          padding: 10rpx;
          color: $uni-color-primary;
          border: 1px solid $uni-color-primary;
        }
      }
    }
  }

  .empty_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.status_wrap_pop {
  padding: 30rpx;
  min-height: 300rpx;

  .pop_actions {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .reset_btn {
      color: #888;
      padding: 12rpx;
    }

    .confirm_btn {
      color: $uni-color-primary;
      padding: 12rpx;
    }
  }

  .status_item {
    .status_item_title {
      padding: 30rpx 0;
      font-size: 36rpx;
      font-weight: 400;
      color: #333;
    }

    .status_item_btns_box {
      display: flex;
      flex-wrap: wrap;
      gap: 18rpx;

      .status_item_btn {
        border: 1px solid #ddd;
        padding: 10rpx 20rpx;
        color: #666;
      }

      .status_item_btn_active {
        border: 1px solid $uni-color-primary;
        background-color: $uni-color-primary;
        color: #fff;
      }
    }
  }
}

.form_wrap {
  width: 100%;
  padding: 24rpx 30rpx;

  .u-form-item__body__right .u-cell {
    width: 100%;
  }
}
</style>
